<template>
  <el-card :body-style="{ padding: '0px' }" shadow="hover" class="card">
    <img :src="noteImg" class="image" alt=""/>
    <div style="padding: 14px;text-align: center">
      <span>{{ noteTitle }}</span>
      <div class="bottom" style="text-align: -webkit-center;margin-top: 3%;">
        <el-button text class="button" type="primary" plain @click="tiptap">进入笔记</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, watch} from 'vue'
import {setNoteImgAndNoteTitleByUuid} from "@/api/note";
import router from '../../router';

let List = ""
let noteTitle = ref('默认标题')
let noteImg = 'http://qiniuyun.linter.top/Linter/Vue_img/Note/%E7%AC%94%E8%AE%B0%E5%B0%81%E9%9D%A2.png'

// 请求数据
let pageNum = ref(1)
const pageSize = ref(8)

// 接收父组件的值
const props = defineProps({index: Number,data: Number,pageNum: Number})

// 将请求进行封装使用
function API(pageNumAPI){
  setNoteImgAndNoteTitleByUuid(pageNumAPI,pageSize.value).then((res) =>{
    List = res.data.data
    noteTitle.value = List.list[props.index].notetitle
    if(List.list[props.index].noteimg === ""){console.log("kong");}
    noteImg = List.list[props.index].noteimg
  })
}

// 开始渲染
API(pageNum.value)

// 当页面发生改变时进行渲染
watch(()=>props.pageNum,(newValue, oldValue) => {pageNum.value = newValue;API(pageNum.value)},{immediate: true})

// 点击跳转进入笔记页面
function tiptap() {
  console.log("进入笔记页面");
  router.push({name: 'tiptap'})
}


</script>

<style scoped>
.image {
  width: 100%;
  display: block;
}
.button {
  padding: 10px;
  min-height: auto;
  width: max-content
}
.card{
  border-radius: 25px;
  width: 90%;
  height: 100%;
}
</style>
